<template>
  <a-drawer
    placement="right"
    :closable="true"
    :visible="visible"
    width="100%"
    @close="onClose"
  >
    <div class="wrap">
      <!--      <div class="header">-->
      <!--        <span>流程图设计器</span>-->
      <!--        <span>-->
      <!--          <span style="margin-right: 16px; cursor: pointer">-->
      <!--            设计指南-->
      <!--          </span>-->
      <!--          <GithubOutlined onClick="{openGithub}" />-->
      <!--        </span>-->
      <!--      </div>-->
      <div class="content">
        <!--左侧工具栏-->
        <div id="flowStencil" class="sider" />
        <div class="panel">
          <!--流程图工具栏-->
          <div class="toolbar">
            <tool-bar v-if="isReady" />
          </div>
          <!--流程图画板-->
          <div id="flowContainer" class="x6-graph" />
        </div>
        <!--右侧工具栏-->
        <div class="config">
          <config-panel v-if="isReady"/>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import './index.less'
import FlowGraph from './graph'
import ToolBar from './components/ToolBar/index.vue'
import ConfigPanel from './components/ConfigPanel/index.vue'

export default {
  name: 'Index',
  components: {
    ToolBar,
    ConfigPanel

  },
  data () {
    return {
      visible: false,
      isReady: false
    }
  },
  mounted () {
  },
  methods: {
    showDrawer () {
      setTimeout(() => {
        this.initGraph()
      }, 100)
      this.visible = true
    },
    onClose () {
      FlowGraph.destroy()
      this.visible = false
      this.isReady = false
    },
    getContainerSize () {
      return {
        width: document.body.offsetWidth - 690,
        height: document.body.offsetHeight - 38
      }
    },
    initGraph () {
      const graph = FlowGraph.init()
      this.isReady = true
      const resizeFn = () => {
        const { width, height } = this.getContainerSize()
        graph.resize(width, height)
      }
      resizeFn()
      window.addEventListener('resize', resizeFn)
      return () => {
        window.removeEventListener('resize', resizeFn)
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
